<template>
  <vxe_table ref="Cx_table" :options="options" @handleTableBtn="handleTableBtn">
    <template #btn>
      <el-button type="primary" @click="add">添加</el-button>
    </template>
    <template #name="{ row }">
      <el-input v-model="row.name" placeholder="" clearable></el-input>
    </template>
    <template #value="{ row }">
      <el-checkbox-group v-model="row.value">
        <el-input v-model="row.value" placeholder="" clearable></el-input>
      </el-checkbox-group>
    </template>
  </vxe_table>
</template>

<script>
import tableMixin from "@/mixins";
import { Message } from "element-ui";
export default {
  mixins: [tableMixin],
  data() {
    return {
      options: {
        id: "addattr",
        border: true,
        hideExport: true,
        hideSearch: true,
        hidePage: true,

        height: 280,
        editRules: {
          name: [{ required: true, message: "必须填写" }],
          value: [{ required: true, message: "必须填写" }],
        },
        editConfig: {
          trigger: "click",
          mode: "row",
        },
        columns: [
          {
            field: "seq",
            title: "序号",
            type: "seq",
          },
          {
            field: "label",
            title: "属性名称",
            // slot: "name",
            editRender: { name: "ElInput" },
          },
          {
            field: "value",
            title: "属性值",
            editRender: { name: "ElInput" },
            // slot: "value",
          },
        ],
        btnWidth: 100,
        btn: [
          {
            title: "删除",
            handleName: "handleDel",
            type: "danger",
          },
        ],
      },
    };
  },
  methods: {
    get() {
      return this.$refs.Cx_table.tableData;
    },
    set(data){
      this.$refs.Cx_table.tableData = data
    },
    handleDel(row, index) {
      console.log(row, index);
      this.$refs.Cx_table.tableData.splice(index, 1);
    },
    async add() {
      const $table = this.$refs.Cx_table.$refs.table;
      const errMap = await $table.validate(true);
      console.log(errMap);
      if (errMap) {
        Message.error("请填写完成");
        return;
      }
      this.$refs.Cx_table.tableData.push({
        label: "",
        value: "",
      });
    },
  },
};
</script>
